<template>
  <div flex>
    <base-layout title="人员信息" ref="layout" @pageChange="pageChange" :isPage="true" :showTitle="false"
                 @onFuncBtn="getFuncBtn">
      <div slot="main" style="height: 100%;" slot-scope="{ tableHeight }">
        <base-table ref="customtable" :border="true" :showIndex="false" :slotrow="true"
                    :tabLoading.sync="tabLoading" :tableHeight="tableHeight" :tableData="tableData"
                    :tableColumn="tableColumn" @sortChange="sortChange" @radioChange="radioChange">
          <!-- 单选 -->
          <!-- 	<template v-slot:option="{row}">
            <el-radio v-model="radioIndex" :label="row.$index"><span></span></el-radio>
          </template> -->
        </base-table>
      </div>
    </base-layout>

    <base-right-dialog :closeEscape="false" :showClose="false" :closeModal="false" :dialogVisible.sync="RoleAdd"
                 :title="frameTitle + '角色信息'" width="520px" @handleConfirmClick="confirmBtn" @handleClose="handleClose">
      <el-form validate-on-rule-change :model="ruleForm" :rules="rules" class="formMain" ref="ruleForm"
               label-width="100px">
        <el-form-item prop="r_RoleCode">
          <span class="label" slot="label">角色编码</span>
          <el-input placeholder="请输入角色编码" clearable v-model="ruleForm.roleCode">
          </el-input>
        </el-form-item>
        <el-form-item prop="r_RoleName">
          <span class="label" slot="label">角色名称</span>
          <el-input clearable placeholder="请输入角色名称" v-model="ruleForm.roleName">
          </el-input>
        </el-form-item>
        <el-form-item prop="r_Sort">
          <span class="label" slot="label">状态</span>
          <el-radio-group v-model="ruleForm.enableState">
            <el-radio label="0">启用</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="r_Description">
          <span class="label" slot="label">描述</span>
          <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="ruleForm.r_Description">
          </el-input>
        </el-form-item>
      </el-form>
<!--      <div flex="cross:center main:right">-->
<!--        <el-button type="primary" @click="confirmBtn">确认</el-button>-->
<!--        <el-button @click="cancelBtn">取消</el-button>-->
<!--      </div>-->
    </base-right-dialog>
  </div>
</template>

<script>
import baseRightDialog from "@/components/base/baseRightDialog";
import baseLayout from "@/components/base/baseLayout";
import BaseTable from '@/components/base/baseTable/index.vue'
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import BaseSelect from '@/components/base/BaseSelect'
import baseTree from "@/components/base/BaseMenuTree/index.vue";
import {
  RoleGetBillList,
  RoleDelData,
  RoleSaveData
} from '@/api/apis/roleManagement'
import { authApi } from "@/api/apis/auth";
export default {
  name: 'RoleSettings',
  components: {
    baseLayout,
    BaseTable,
    BaseSelect,
    baseDialog,
    baseTree,
    baseRightDialog
  },
  data() {
    return {
      radioIndex: false,
      radioId: false,
      radioForm: {},

      mainColor: '#f8f8f8 ',
      tabLoading: false,
      tableData: [],
      total: "",
      pageModel: {
        pageNum: 1,
        pageSize: 20,
        roleCode: '',
        roleName: ''
      },
      // 表头
      tableColumn: [
        {
          label: '角色编号',
          prop: 'roleCode',
          tooltip: true,
          sortable: true,
        },
        {
          label: '角色名称',
          prop: 'roleName',
          tooltip: true,
          sortable: true,
        },
        {
          label: '角色描述 ',
          prop: 'description',
          tooltip: true,
        },
      ],
      RoleAdd: false,
      ruleForm: {
        R_RoleID: "", //角色id
        r_RoleCode: null, // 角色编码
        r_RoleName: null, // 角色名称
        r_Sort: null, // 排序
        r_Description: null, // 描述
      },
      rules: {
        roleCode: [{
          required: true,
          message: '请输入角色编码',
          trigger: 'blur'
        }],
        roleName: [{
          required: true,
          message: '请输入角色名称',
          trigger: 'blur'
        }],
        enableState: [{
          required: true,
          message: '请选择状态',
          trigger: 'blur'
        }],
      },
      menuData: [],
      frameTitle: '',
    }
  },
  watch: {
    pageModel: {
      deep: true, //深度监听设置为 true
      handler: function (newV, oldV) {
        this.getTableList()
      }
    },
    RoleAdd: {
      deep: true, //深度监听设置为 true
      handler: function (newV, oldV) {
        if (this.RoleAdd == true) {
          this.$nextTick(() => {
            this.$refs.ruleForm.clearValidate();
          })
        }
      }
    }
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    handleClose(){
      this.RoleAdd=false
    },
    // 点击单元格进行多选操作
    radioChange(val) {
      this.radioIndex = val.index
      this.radioId = val.id
      this.radioForm = val
    },
    // 获取表格内容
    async getTableList() {
      this.radioIndex = false
      this.tabLoading = true
      let params = {
        ...this.pageModel
      }
      // let res = await RoleGetBillList(params)
      const res = await authApi("sysRoleService","","queryEntityPage","",params)
      if (res.status == 200) {
        this.$refs.layout.setPageTotal(res.attribute.total)
        this.$refs.customtable.clearRadioIndex()
        this.tableData = res.attribute.list
      }
      this.tabLoading = false
    },
    async delData(id) {
      let params = {
        id: id
      }
      let res = await authApi("sysRoleService","","deleteEntity","",params)
      if (res.status == 200) {
        this.$vmNews('删除成功', 'success')
        this.getTableList()
        // this.tableResult()
      } else {
        this.$vmNews('删除失败', 'error')
      }
    },
    getFuncBtn(btnEven) {
      if (btnEven.menuName == '新增') {
        this.ruleForm = {}
        this.frameTitle = '添加'
        this.RoleAdd = true
      }
      if (btnEven.menuName == '编辑') {
        // this.ruleForm = row
        if (this.radioIndex === false) {
          this.$vmNews('请选择一条记录')
        } else {
          this.ruleForm = Object.assign({}, this.radioForm)
          this.frameTitle = '编辑'
          this.RoleAdd = true
        }

      }
      if (btnEven.menuName == '删除') {
        if (this.radioIndex === false) {
          this.$vmNews('请选择一条记录')
        } else {
          this.$confirm('确认删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            console.log(this.radioId,'this.radioId')
            this.delData(this.radioId)
            this.getTableList()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
          });
        }
        // this.tableData.splice(,1)
      }

    },
    // 确定
    async confirmBtn() {
      let params = {
        ...this.ruleForm
      }
      let pass
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          pass = true
        } else {
          pass = false

        }
      });
      if (pass) {
        let res
        if(this.frameTitle === '添加'){
          res = await authApi("sysRoleService","","saveEntity","",this.ruleForm)
        }else if (this.frameTitle === '编辑'){
          console.log(this.ruleForm,'this.ruleForm')
          res = await authApi("sysRoleService","","updateEntity","",this.ruleForm)
        }
        if (res.status == 200) {
          this.$vmNews('保存成功', 'success')
          this.tableResult()
          this.RoleAdd = false
        }
        this.getTableList()
      } else {
        return
      }
    },
    tableResult() {
      this.ruleForm = {}
      this.radioForm = {}
      this.radioId = false
      this.radioIndex = false
      this.$refs.customtable.clearRadioIndex()
      this.pageModel.page = 1
      this.$nextTick(() => {
        this.$refs.layout.pageClear(1)
        this.$refs.customtable.clearSelect();
      })
      // this.getTableList()
    },
    // 取消
    cancelBtn() {
      this.RoleAdd = false
    },
    // 页面改变时
    pageChange(model) {
      this.pageModel.pageNum = model.page
      this.pageModel.pageSize = model.limit
    },
    // 排序
    sortChange(prop, type) {
      this.pageModel.SequenceName = prop
      this.pageModel.Sequence = type
      this.pageModel.pageNum = 1
      this.radioForm = {}
      this.radioId = false
      this.$nextTick(() => {
        this.$refs.layout.pageClear()
      })
    }
  },
}
</script>

<style>
textarea {

  resize: none;

}
</style>
